<#include "/include/macros.ftl">
<@header></@header>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <@breadcrumb>
            <ol class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li class="active">设计师用户管理</li>
            </ol>
        </@breadcrumb>
        <div class="x_panel">
            <div class="x_content">
                <div class="<#--table-responsive-->">
                    <form id="searchForm" name="searchForm" onsubmit="return false">
                        <table>
                            <tr>
                                <td>会员账号:</td>
                                <td><input type="text" id="userId" name="userId"></td>
                                <td width="10px"></td>
                                <td>性别:</td>
                                <td>
                                    <select id="sex" name="sex">
                                        <option value="" selected>全部</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </td>
                                <td width="10px"></td>
                                <td>姓名:</td>
                                <td><input type="text" id="username" name = "username"></td>
                                <td width="10px"></td>
                                <td>公司:</td>
                                <td><input type="text" id="companyName" name = "companyName"></td>
                                <td width="10px"></td>
                                <td>所在地区:</td>
                                <td><input type="text" id="workAddress" name = "workAddress"></td>
                            </tr>
                            <tr style="height: 10px"></tr>
                            <tr>
                                <td>提交时间:</td>
                                <td><input type="text" id="applyTimeStart" name = "applyTimeStart"></td>
                                <td width="10px"></td>
                                <td>-</td>
                                <td><input type="text" id="applyTimeEnd" name = "applyTimeEnd"></td>
                                <td width="10px"></td>
                                <td>审核状态:</td>
                                <td>
                                    <select id="step" name = "step" >
                                        <option value="" selected>全部申请</option>
                                        <option value="2">待审核</option>
                                        <option value="4">审核不通过</option>
                                    </select>
                                </td>
                                <td><input type="button" value="搜索" id="btnSearch" name="btnSearch"></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div class="x_panel">
            <div class="x_content">
                <div class="<#--table-responsive-->">
                    <table id="tablelist"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<@addOrUpdateMOdal defaultTitle="设计师申请资料">
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="headPicture">头像:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="hidden" class="form-control col-md-7 col-xs-12" name="headPicture" id="headPicture" readonly/>
            <img src="/assets/img/baseImg.png" style="width: 100px;" name="headPictureImg" id="headPictureImg" alt="点击显示" onclick="changeImg('headPicture')"/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="username">姓名:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="username" id="username" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sex">性别:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="sex" id="sex" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="birthday">出生日期:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="birthday" id="birthday" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="academic">学历:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="academic" id="academic" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="major">专业:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="major" id="major" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">联系方式:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="telephone" id="telephone" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">邮箱:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="email" id="email" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="liveAddress">所在城市:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="liveAddress" id="liveAddress" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="designTime">入行年份:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="designTime" id="designTime" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="idcardBack">证件照片:</label>
        <div class="col-md-6 col-sm-6 item col-xs-12">
            <input type="hidden" class="form-control col-md-7 col-xs-12" name="idcardFace" id="idcardFace" readonly/>
            <img src="/assets/img/baseImg.png" style="width: 100px;" name="idcardFaceImg" id="idcardFaceImg" readonly alt="点击显示" onclick="changeImg('idcardFace')"/>
            <input type="hidden" class="form-control col-md-7 col-xs-12" name="idcardBack" id="idcardBack" readonly/>
            <img src="/assets/img/baseImg.png" style="width: 100px; margin-left: 20px" name="idcardBackImg" id="idcardBackImg" alt="点击显示" onclick="changeImg('idcardBack')"/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="companyName">公司名称:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="companyName" id="companyName" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="workAddress">办公地址:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="workAddress" id="workAddress" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="serviceAddress">服务地区:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="serviceAddress" id="serviceAddress" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="designType">设计类型:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="designType" id="designType" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="teamDetail">团队介绍:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="teamDetail" id="teamDetail" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="businessLicense">营业执照:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="hidden" class="form-control col-md-7 col-xs-12" name="businessLicense" id="businessLicense" readonly/>
            <img src="/assets/img/baseImg.png" style="width: 100px;" name="businessLicenseImg" id="businessLicenseImg" alt="点击显示" onclick="changeImg('businessLicense')"/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="submitTime">提交时间:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="submitTime" id="submitTime" readonly/>
        </div>
    </div>
    <h1>审核记录</h1>
    <div class="item form-group">
        <div style="display:none;" id="review">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="step">审核结果:</label>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <select id="step" name="step" class="form-control">
                    <option value="3">审核通过</option>
                    <option value="4">审核不通过</option>
                </select>
            </div>
        </div>
        <div id="reviewF">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="result">审核结果:</label>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <input type="text" class="form-control col-md-7 col-xs-12" value="审核不通过" id="result" name="result" readonly/>
            </div>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="reason">审核原因:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="reason" id="reason" readonly/>
        </div>
    </div>
    <div class="item form-group" id="reTim">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="reviewTime">审核时间:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="reviewTime" id="reviewTime" readonly/>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="reviewer">审核人:</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control col-md-7 col-xs-12" name="reviewer" id="reviewer" readonly/>
        </div>
    </div>
    <input type="hidden" class="form-control col-md-7 col-xs-12" name="id" id="id" readonly/>
    <input type="hidden" class="form-control col-md-7 col-xs-12" name="userId" id="userId" readonly/>
</@addOrUpdateMOdal>
<@footer>
    <script>
        /**
         * 操作按钮
         * @param code
         * @param row
         * @param index
         * @returns {string}
         */
        function operateFormatter(code, row, index) {
            let id = row.id;
            let step = row.step;
            let operateBtn = [];
            if("4" === step){
                operateBtn.push('<a class="btn btn-sm btn-success btn-update" data-id="' + id + '"  data-status="' + step + '"  title="查看"><i class="fa fa-edit fa-fw"></i></a>');
            }
            operateBtn.push('<a class="btn btn-sm btn-danger btn-remove" data-id="' + id + '" title="删除"><i class="fa fa-trash-o fa-fw"></i></a>');
            if("2" === step){
                operateBtn.push('<a class="btn btn-sm btn-info btn-update" data-id="' + id + '" data-status="' + step + '"  title="审核"><i class="fa fa-circle-thin fa-fw"></i></a>');
            }
            return operateBtn.join('');
        }

        $(function () {
            let options = {
                url: "/dealDesignerApply/list",
                getInfoUrl: "/dealDesignerApply/designerDetailPage/{id}",
                updateUrl: "/dealDesignerApply/review",
                delete: "/dealDesignerApply/del/",
                columns: [
                    {
                        checkbox: true
                    }, {
                        field: 'id',
                        visible: false,
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    },{
                        field: 'Number',
                        title: '序号',
                        formatter: function (value, row, index) {
                            return index  + 1;
                        }
                    }, {
                        field: 'userId',
                        title: '会员账号',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'sex',
                        title: '性别',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'username',
                        title: '姓名',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'companyName',
                        title: '公司',
                        align: 'center',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'workAddress',
                        title: '所在地区',
                        align: 'center',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'reason',
                        title: '状态',
                        align: 'center',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'updateTime',
                        title: '更新时间',
                        align: 'center',
                        formatter: function (code) {
                            return code ? code : '-';
                        }
                    }, {
                        field: 'operate',
                        title: '操作',
                        align: "center",
                        width: '150px',
                        formatter: operateFormatter //自定义方法，添加操作按钮
                    }
                ],
                modalName: "用户"
            };
            // 初始化table组件
            let table = new Table(options);
            table.init();


            /* 查看详细内容 */
            table.bindClickEvent('.btn-update', function () {
                let $this = $(this);
                let status = $this.attr("data-status");
                if("2" === status){
                    document.getElementById("review").style.display="";
                    document.getElementById("reviewF").style.display="none";
                    document.getElementById("reTim").style.display="none";
                    $("#reason").attr("readonly",false);
                    $("#reviewer").attr("readonly",false);
                }else{
                    document.getElementById("review").style.display="none";
                    document.getElementById("reviewF").style.display="";
                    document.getElementById("reTim").style.display="";
                    $("#reason").attr("readonly",true);
                    $("#reviewer").attr("readonly",true);
                }
            });


            /* 删除 */
            table.bindClickEvent('.btn-remove', function () {
                console.log("删除");
                let $this = $(this);
                let id = $this.attr("data-id");
                $.post(options.delete, {"id": id}, function (obj) {
                }, 'json');
            });

            /* 启用 */
            table.bindClickEvent('.btn-enable', function () {
                console.log("启用");
                let $this = $(this);
                let userId = $this.attr("data-userId");
                $.post(options.enableUrl, {"userId": userId,"status": 1}, function (obj) {
                    table.init();
                }, 'json');
            });

            /* 禁用 */
            table.bindClickEvent('.btn-disable', function () {
                console.log("禁用");
                let $this = $(this);
                let userId = $this.attr("data-userId");
                $.post(options.disableUrl, {"userId": userId,"status": 0}, function (obj) {
                    table.init();
                }, 'json');
            });

            $("#btnSearch").click(function () {
                $("#tablelist").bootstrapTable('removeAll');
                $('#tablelist').bootstrapTable('refresh',
                    {
                        query: {
                            userId : $("#userId").val(),
                            sex : $("#sex").val(),
                            username : $("#username").val(),
                            companyName : $("#companyName").val(),
                            workAddress : $("#workAddress").val(),
                            applyTimeStart : $("#applyTimeStart").val(),
                            applyTimeEnd : $("#applyTimeEnd").val(),
                            step : $("#step").val(),
                        }
                    });
            });

            table.bindClickEvent('.btn-update', function () {
                console.log("禁用");
                let a = ["headPicture", "idcardFace", "idcardBack", "businessLicense"];
                for(let i = 0;i < a.length;i++){
                    let itemImg = "#" + a[i] + "Img";
                    $(itemImg).attr("src","/assets/img/baseImg.png");
                }
            });

        });

        function changeImg(e){
            let item = "#" + e;
            let itemImg = item + "Img";
            let img= $(item).val();
            $(itemImg).attr("src",img);
        }

    </script>
</@footer>